<#import "/layout/mainLayout.html" as mainLayout />

<#macro mainheading>
    <link rel="stylesheet" type="text/css" href="/plugins/flatpickr/flatpickr.material_orange.min.css">
</#macro>
<#assign mainheading = mainheading in mainLayout />

<#macro maincontent>
    <section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">

                        <div class="col-sm-2">
                            <input type="text" class="form-control" id="input_name"
                                   placeholder="名称...">
                        </div>

                        <div class="col-sm-1 pull-right">
                            <button class="btn btn-block btn-default " id ="btn_search" onclick="searchList()">查询
                            </button>
                        </div>
                        <div class="col-sm-2 pull-right">
                            <button class="btn btn-block btn-default "
                                    onclick="allBaobiao('')">总播放报表
                            </button>
                        </div>
                        <div class="col-sm-2 pull-right">
                            <button class="btn btn-block btn-default "
                                    onclick="showFilm('')">总电影播放报表
                            </button>
                        </div>
                        <div class="col-sm-2 pull-right">
                            <button class="btn btn-block btn-default "
                                    onclick="showDaysLinesD('')">总每小时播放量
                            </button>
                        </div>
                    </div><!-- /.box-header -->
                </div>

                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover">
                        <tbody>
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>商户名称</th>
                            <th>AK</th>
                            <th>SK</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody id="bodycontent">


                        </tbody>
                    </table>
                </div><!-- /.box-body -->
                <div id="pagecontent" class="pagination"></div>
            </div><!-- /.box -->
        </div>

    </div>
    </section>
</#macro>
<#assign maincontent = maincontent in mainLayout />

<#macro mainfooter>
    <!--layoutmain footer...-->
    <!--<br />-->
    <script src="/js/jquery/jquery.form.js"></script>
    <script src="/js/echars/echarts.common.min.js"></script>
    <script src="/plugins/flatpickr/flatpickr.js"></script>
    <script>/* Mandarin locals for flatpickr */
    var Flatpickr = Flatpickr || { l10n: {} };

    Flatpickr.l10n.weekdays = {
        shorthand: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        longhand: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    };

    Flatpickr.l10n.months = {
        shorthand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        longhand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    };
    </script>
    <script type="text/javascript">

        var user_data = {
        };

        function searchList() {


            user_data = {
                name:$('#input_name').val(),
                pno: 1,
                pagesize: 10,
                allcount:-1
            };
            LoadList();
        }
        //加载列表
        searchList();
        function LoadList() {
            $('#pagecontent').html('');
            $.ajax({
                    url: '/api/merchant/getmerchantlist',
                    data: user_data,
                    dataType: 'json',
                    success: function (data) {
                        if (mortise_layout.ValidataResult(data)) {
                            if (data.result) {
                                user_data.allcount = data.result.count;
                                var html = '';
                                $.each(data.result.list, function (index, item) {
                                    html += getHtml(item);
                                })
                                $('#bodycontent').html(html);
                                ShowPage('pagecontent', user_data, function (pno) {
                                    user_data.pno = pno;
                                    LoadList();
                                });
                            }
                            else {
                                alert('返回数据错误！');
                            }
                        }
                        else {
                            alert('请求数据失败！');
                        }
                    }
                }
            );
        }
        function  getHtml(dataObject) {

            return ' <tr>'+
                '<td>'+dataObject.mid+'</td>'+
                '<td>'+dataObject.mname+'</td>'+
                '<td>'+dataObject.ak+'</td>'+
                '<td>'+dataObject.sk+'</td>'+
                '<td>' +
                '<a style="cursor: pointer"  href="/page/merchant/merchantloglist?ak='+dataObject.ak+'">查看播放记录</a>&nbsp;&nbsp;' +
                '<a style="cursor: pointer" href="#" onclick="allBaobiao(\''+dataObject.ak+'\')">查看年度报表</a>&nbsp;&nbsp;' +
                '<a style="cursor: pointer" href="#" onclick="showFilm(\''+dataObject.ak+'\')">播放量报表</a>&nbsp;&nbsp;'+
                '<a style="cursor: pointer" href="#" onclick="showDaysLinesD(\''+dataObject.ak+'\')">单天视频播放量</a>&nbsp;&nbsp;'+
            '</td>'+
                '</tr>';
        }
        
        
        function allBaobiao(akid) {
            dialog({
                title: '提示',
                content: '<div id="chart_id" " style="width: 650px;height: 370px;"></div>',
                cancel: false,
                ok: function () {
                }
            }).width(680).showModal();
            //showLIines();
            $.ajax({
                    url: '/api/merchant/getctbyyear?akid=' + akid,
                    dataType: 'json',
                    success: function (data) {
                        if (mortise_layout.ValidataResult(data)) {
                            if (data.result) {
                                var yearData = [];
                                var Vdata = [];
                                $.each(data.result, function (key, value) {
                                    yearData.push(value.f_year)
                                    Vdata.push(value.f_ct)
                                });
                                if (yearData.length > 0) {
                                    showLIines('chart_id', yearData, Vdata);
                                }
                            }
                            else {
                                alert('返回数据错误！');
                            }
                        }
                        else {
                            alert('请求数据失败！');
                        }
                    }
                }
            );

        }

        function showFilm(akid) {
            dialog({
                title: '提示',
                content: '<div id="chart_idfilm" " style="width: 600px;height: 370px;"></div>',
                cancel: false,
                ok: function () {
                }
            }).width(600).showModal();
            //showLIines();
            $.ajax({
                    url: '/api/merchant/getctbyfilm?akid=' + akid,
                    dataType: 'json',
                    success: function (data) {
                        if (mortise_layout.ValidataResult(data)) {
                            if (data.result) {
                                var filmData = [];
                                var Vdata = [];
                                $.each(data.result, function (key, value) {
                                    filmData.push(value.f_name)
                                    Vdata.push(value.f_ct)
                                });

                                console.log(filmData)
                                console.log(Vdata)
                                if (filmData.length > 0) {
                                    showFilmBar('chart_idfilm', filmData, Vdata);
                                }
                            }
                            else {
                                alert('返回数据错误！');
                            }
                        }
                        else {
                            alert('请求数据失败！');
                        }
                    }
                }
            );

        }
        
        function showDaysLinesD(akid) {

            dialog({
                title: '提示',
                content: ' <input type="text" id="input_date"' +
                ' name="input_date" style="width: 120px"                    data-enable-time="false"' +
                ' data-enable-seconds="false"' +
                    'time_24hr="false"' +
                'minuteincrement="10"' +
                    'type="text"' +
                'class="select_time flatpickr"' +
                'style="padding-left: 5px;" />&nbsp;&nbsp;&nbsp;' +
                '<button type="button" id="btn_searchday"  onclick="searchDay('+akid+')">查询</button>' +
                '<div id="chart_idday" " style="width: 600px;height: 370px;"></div>',
                cancel: false,
                ok: function () {
                }
            }).width(600).showModal();
            document.getElementById("input_date").flatpickr();
            //btn_searchday();


        }
        function searchDay(akid){
            var date=$('#input_date').val();
            if (!akid){
                akid='';
            }
            if (!date){
                return;
            }
            $.ajax({
                    url: '/api/merchant/getctbyhtime?akid=' + akid+'&date='+date,
                    dataType: 'json',
                    success: function (data) {
                        if (mortise_layout.ValidataResult(data)) {
                            if (data.result) {
                                var timeData = [];
                                var Vdata = [];
                                var DataAray=[];
                                for (var i=0;i<=23;i++){
                                    DataAray.push({"f_ct":0,"f_htime":i})
                                }
                                $.each(data.result, function (key, value) {
                                    console.log(parseInt(value.f_htime))
                                    DataAray[parseInt(value.f_htime)]={"f_ct":value.f_ct,"f_htime":value.f_htime};
                                });
                                $.each(DataAray, function (key, value) {
                                    timeData.push(value.f_htime+'时')
                                    Vdata.push(value.f_ct)
                                });
                                if (timeData.length > 0) {
                                    showDayLines('chart_idday',date, timeData, Vdata);
                                }
                            }
                            else {
                                alert('返回数据错误！');
                            }
                        }
                        else {
                            alert('请求数据失败！');
                        }
                    }
                }
            );
        }
        function showLIines(id,yearsData,vData){
            var myChart = echarts.init(document.getElementById(id));
            var  option = {
                title : {
                    text: '每年播放量'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['播放量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : yearsData
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'播放量',
                        type:'bar',
                        data:vData,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //电影播放次数
        function showFilmBar(id,filmData,valueData) {
            var myChart = echarts.init(document.getElementById(id));
            option = {
                title : {
                    text: '电影播放量'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['播放量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'value',
                        boundaryGap : [0, 0.01]
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : filmData
                    }
                ],
                series : [
                    {
                        name:'播放次数',
                        type:'bar',
                        data:valueData
                    }
                ]
            };
            myChart.setOption(option);
        }

        function showDayLines(id,date,dayDate,vData){
            var myChart = echarts.init(document.getElementById(id));
            option = {
                title : {
                    text: date+'播放次数',
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['播放次数']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : dayDate
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'播放次数',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:vData
                    }
                ]
            };
            myChart.setOption(option);
        }

    </script>
</#macro>
<#assign mainfooter = mainfooter in mainLayout />
<@mainLayout.page title="用户管理"/>